<template>
  <div>
    <cus-search>
      <cus-search-item>
        <cusButton class="mr_10 mb_20" @onClick="getMenuListApi"
          >查询</cusButton
        >
        <cusButton class="mr_10 mb_20" type="primary" @onClick="onAdd"
          >新增</cusButton
        >
      </cus-search-item>
    </cus-search>

    <cus-card title="菜单列表" class="mt_20">
      <Table
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
      >
        <template slot-scope="{ row, index }" slot="name">
          <collapseArrow :index="index" :row="row" @onClick="onClick">{{
            row.name
          }}</collapseArrow>
        </template>

        <template slot-scope="{ row, index }" slot="resourceType">
          <Tag color="primary" v-if="row.resourceType == 1">目录</Tag>
          <Tag color="success" v-if="row.resourceType == 2">菜单</Tag>
        </template>
        <template slot-scope="{ row, index }" slot="gmtCreate">
          {{ row.gmtCreate | formatTime("yyyy-MM-dd hh-mm-ss") }}
        </template>

        <template slot-scope="{ row, index }" slot="icon">
          <Icon :type="row.icon" size="28"></Icon>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF' }"
              @onClick="onEdit(row)"
            >
              修改
            </cus-button>
            <!-- <cus-button
              type="text"
              size="small"
              :style="{ color: '#FF4746' }"
              @onClick="onDelete(row)"
            >
              删除
            </cus-button> -->
          </div>
        </template>
      </Table>
    </cus-card>
    <cus-footer></cus-footer>
    <menuModal ref="menuModal"></menuModal>
  </div>
</template>

<script>
import { getMenuList, deleteMenu } from "@/api/business/system";
import collapseArrow from "./components/collapseArrow";
import menuModal from "./components/menuModal";

export default {
  components: { menuModal, collapseArrow },
  name: "menuManage",
  data() {
    return {
      form: {
        loading: true
      },
      data: [],
      columns: [
        {
          title: "名称",
          minWidth: 200,
          slot: "name",
          align: "left",
          fixed: "left"
        },
        {
          title: "图标",
          minWidth: 100,
          slot: "icon",
          align: "center"
        },
        {
          title: "类型",
          minWidth: 100,
          slot: "resourceType",
          align: "center"
        },
        {
          title: "节点路由",
          minWidth: 200,
          key: "url",
          align: "center"
        },
        /*{
            title: '路由缓存',
            minWidth: 100,
            align: 'center'
          },*/
        {
          title: "文件路径",
          minWidth: 300,
          key: "filePath",
          align: "center"
        },
        /*{
            title: '权限',
            minWidth: 150,
            align: 'center'
          },*/
        {
          title: "排序号",
          minWidth: 150,
          key: "seq",
          align: "center"
        },
        {
          title: "更新时间",
          minWidth: 180,
          slot: "gmtCreate",
          align: "center"
        },
        {
          title: "操作",
          width: 170,
          fixed: "right",
          slot: "operation",
          align: "center"
        }
      ],
      router: []
    };
  },
  mounted() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.form.loading = true;
      this.getMenuListApi().then(() => (this.form.loading = false));
    },
    onAdd() {
      this.$refs["menuModal"].show();
    },
    onEdit(row) {
      this.$refs["menuModal"].form.id = row.id;
      this.$refs["menuModal"].show();
    },
    onDelete(row) {
      this.$cu.dialog({ params: row }).then(({ id }) => {
        this.$cu.showLoading();
        this.deleteMenuApi(id);
      });
    },
    onClick(row, index) {
      this.data[index].expand = !this.data[index].expand;
      let router = this.router.filter(v => {
        return v.pid === row.id;
      });

      router = router.map(v => {
        v.levels = row.levels + 1;
        if (v.resourceType === 2) {
          v.showArrow = false;
        } else v.showArrow = true;
        return v;
      });

      if (!this.data[index].showArrow) return;

      if (this.data[index].expand) {
        this.data.splice(index + 1, 0, ...router);
      } else {
        let endArr = Object.assign([], this.data);
        endArr.splice(0, index + 1);

        let endIndex = endArr.findIndex(v => {
          return v.pid == row.pid;
        });
        if (endIndex === -1) {
          endIndex = this.data.length - (index + 1);
        }

        endArr = endArr.map((v, i) => {
          if (i < endIndex) {
            v.expand = false;
          }
          return v;
        });
        this.data.splice(index + 1, endIndex);
      }
    },
    getMenuListApi() {
      this.form.loading = true;
      return new Promise(resolve => {
        getMenuList({}).then(res => {
          if (res.code === 1) {
            this.form.loading = false;
            let router = res.data;
            this.router = router.map(v => {
              v.expand = false;
              v.showArrow = true;
              v.levels = 0;
              return v;
            });
            this.data = router.filter(v => {
              return v.pid === null && v.type == 6;
            });
            resolve();
          }
        });
      });
    },
    deleteMenuApi(id) {
      return new Promise(resolve => {
        deleteMenu({ id: id })
          .then(res => {
            if (res.code === 1) {
              this.$cu.hideLoading();
              this.$Message.success("删除成功");
              this.getMenuListApi();
              resolve();
            } else this.$cu.hideLoading(1.5);
          })
          .catch(() => this.$cu.hideLoading(1.5));
      });
    }
  }
};
</script>

<style scoped lang="less"></style>
